<template>
  <div class="form">
    <el-form :model="searchObj" ref="formRef" label-width="100px">
      <div class="form-content">
        <template v-for="item in columns">
          <el-form-item :label="item.label" :prop="item.prop" v-if="item.search">
            <el-input v-if="item.type == 'input'" v-model="searchObj[item.prop]"
              :placeholder="item.placeholder"></el-input>
            <el-select v-else-if="item.type == 'select'" v-model="searchObj[item.prop]" :placeholder="item.placeholder"
              :size="item.size" style="width: 100%;min-width: 240px;">
              <template v-for="opt in item.searchData" :key="opt.label">
                <el-option :label="opt.label" :value="opt.value" />
              </template>
            </el-select>
          </el-form-item>
        </template>
        <!-- 操作按钮 -->
        <div class="operate">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="empty">清空</el-button>
        </div>
      </div>



    </el-form>
  </div>
  <div class="high-table">
    <el-table :data="tableData" :border="border" :stripe="stripe" style="width: 100%" v-bind="$attrs">
      <!-- 遍历列配置生成表格列 -->
      <template v-for="column in columns">
        <el-table-column :prop="column.prop" :label="column.label">
          <!-- 自定义列模板 -->
          <template #default="scope" v-if="column.slot">
            <slot :name="column.name" :row="scope.row" :$index="scope.$index"></slot>
          </template>
          <!-- 默认列渲染 -->
          <template #default="scope" v-else>
            {{ scope.row[column.prop] }}
          </template>
        </el-table-column>
      </template>
      <!-- 操作列 -->
      <el-table-column width="300" v-if="showOperations" :label="operationLabel" align="center">
        <template #default="scope">
          <!-- 自定义操作列模板 -->
          <template v-for="item in defaultOperations" :key="item.label">
            <el-button :type="item.type || 'primary'" :size="item.size || 'small'" :icon="item.icon"
              @click="item.handler(scope.row)">
              {{ item.label }}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container" v-if="showPagination">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, reactive, onMounted } from 'vue'
import { Edit, View,Delete } from '@element-plus/icons-vue'

// 定义属性
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    required: true,
    default: () => []
  },
  // 列配置
  columns: {
    type: Array,
    required: true,
    default: () => []
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: true
  },
  // 是否显示斑马纹
  stripe: {
    type: Boolean,
    default: true
  },
  // 是否显示操作列
  showOperations: {
    type: Boolean,
    default: true
  },
  // 操作列标题
  operationLabel: {
    type: String,
    default: '操作'
  },
  // 操作列宽度
  operationWidth: {
    type: String,
    default: '150'
  },
  // 操作列是否固定
  operationFixed: {
    type: String,
    default: 'right'
  },
  // 默认操作按钮配置
  defaultOperations: {
    type: Array,
    default: () => []
  },
  // 分页相关配置
  showPagination: {
    type: Boolean,
    default: false
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  defaultPageSize: {
    type: Number,
    default: 10
  }
})
const searchObj = reactive({})

onMounted(() => {
  // 初始化搜索对象
  empty()
})
const handleSearch = () => {
  console.log(searchObj)
  emit('search-change', searchObj)
}

const empty = () => {
  props.columns.forEach(item => {
    searchObj[item.prop] = ''
  })
}
// 定义事件
const emit = defineEmits([
  'operation',
  'size-change',
  'current-change',
  'search-change'
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(props.defaultPageSize)

// 处理操作按钮点击
const handleOperation = (action, row) => {
  emit('operation', { action, row })
}

// 处理分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  emit('size-change', val)
}

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  emit('current-change', val)
}
</script>

<style scoped lang="scss">
.high-table {
  width: 100%;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}


.form {
  padding: 0 20px;
  height: 50px;

  .form-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .operate {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}
</style>